<template>
  <div class="header f jcsb aic">
    <div class="f aic">
      <el-icon
        class="ml30 mr25 pointer"
        color="#9199A1"
        :size="20"
        @click="back"
        ><Back
      /></el-icon>
      <div class="f16">1-1 章节介绍</div>
      <!--      <div-->
      <!--        class="collect f14 pointer ml25 f aic"-->
      <!--        @click="isCollect = !isCollect"-->
      <!--      >-->
      <!--        <svg-icon v-show="isCollect" icon-class="star" size="24" class="mr5" />-->
      <!--        <svg-icon-->
      <!--          v-show="!isCollect"-->
      <!--          icon-class="star-fill"-->
      <!--          size="24"-->
      <!--          class="mr5"-->
      <!--        />-->
      <!--        <div style="margin-top: 1px">收藏</div>-->
      <!--      </div>-->
    </div>
    <div class="f aic">
      <!--      <div class="search f">-->
      <!--        <el-input v-model="searchValue" placeholder="请输入要搜索的内容" />-->
      <!--        <el-button>-->
      <!--          <el-icon class="mr5"><Search /></el-icon>-->
      <!--          搜索-->
      <!--        </el-button>-->
      <!--      </div>-->
      <!--      <el-badge is-dot class="notice ml20 mr20 pointer">-->
      <!--        <el-icon color="#545C63" size="18"><BellFilled /></el-icon>-->
      <!--      </el-badge>-->
      <div class="f aic mr40">
        <div class="mr5">我的课程</div>
        <el-avatar
          :size="32"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </div>
    </div>
  </div>
  <div class="f aic breadcrumb f14">
    <div class="mr10">当前位置：</div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页 </el-breadcrumb-item>
      <el-breadcrumb-item>{{
        dataObj != null ? dataObj.pathName.split("===")[0] : ""
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{
        dataObj != null ? dataObj.pathName.split("===")[1] : ""
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import {
  Back,
  Star,
  Search,
  BellFilled,
  ArrowRight,
  StarFilled,
} from "@element-plus/icons-vue";
const searchValue = ref("");
const isCollect = ref(false);

defineProps(["dataObj"]);
const back = () => {
  history.back();
};
</script>
<style lang="scss" scoped>
.header {
  min-width: 1154px;
  height: 64px;
  color: #1c1f21;
  .collect {
    color: #9199a1;
  }
  .search {
    :deep(.el-input__wrapper) {
      box-shadow: none;
      border: 1px solid #f01414;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      height: 40px;
    }
    :deep(.el-button) {
      border-color: #f01414;
      background: #f01414;
      color: #fff;
      line-height: 38px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      height: 40px;
    }
  }
}
.breadcrumb {
  background: #282828;
  color: #ababab;
  padding-left: 230px;
  width: 100%;
  min-width: 1154px;
  height: 44px;
  :deep(.el-breadcrumb__item .el-breadcrumb__inner) {
    color: #ababab;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 300;
  }
}
</style>
